import {useDispatch, useSelector} from "react-redux";
import {useEffect, useState} from "react";
import {fetchGetAllEquipmentListByPage, fetchGetOneEquipmentById} from '/src/store/modules/equipmentStore.jsx'
// 路由传参，使用useNavigate，记住这个名字，别搞错了
// 路由传参，导入Link，这种也是一种路由跳转方式
import {Link,useNavigate} from "react-router-dom";


const Index = () => {
    const [flag,setFlag]=useState(false);

    const [inputValue,setInputValue]=useState('');

    const {equipmentList,equipment}=useSelector(state=>state.equipment);
    const dispatch=useDispatch();

    // 路由传参，执行一下useNavigate这个函数，
    const navigate=useNavigate();

   useEffect(()=>{
       dispatch(fetchGetAllEquipmentListByPage(1,20))


   },[dispatch])

    const showOne=()=>{
       dispatch(fetchGetOneEquipmentById(5));
       setFlag(true);
        console.log(flag);

    }

    // 路由传参
    const name='eric';


    return (
        <div>
            <ul>{equipmentList.map(item => <li key={item.id}>{item.eqName}</li>)}</ul>
            <button onClick={showOne}>示id为3的equipment</button><br/>
            {flag && <span>{equipment.eqName}</span>}
            <br/>
            <input type="text"
                   onChange={e => setInputValue(e.target.value)}/><br/>

            {/*看清楚，是  {  ()=>navigate(`/equipmentOne/${id}/${name}`)  } */}
            {/*这样子，当点击按钮时，就会跳转到指定路由路径，同时传递2个参数，一个是id,一个是name,这两个参数用/隔开*/}
            <button onClick={() => navigate(`/equipmentOne/${inputValue}/${name}`)}>点击去id</button>
            <br/>
            {/*路由跳转方式,这种是声明式导航,好像不能传参*/}
            <Link to="/">回首页</Link>
            <br/>


        </div>


    )
}

export default Index